<template>
  <div class="category">
    <!-- 头部搜索 -->
    <div class="header">
      <Sticky>
        <HomeSearch @showSearch="showSearch" />
      </Sticky>
    </div>

    <!-- 内容区域-->
    <div class="display-flex">
      <!-- 一级分类 -->
      <Sticky :offset-top="50">
        <Sidebar v-model="active" @change="onChange">
          <SidebarItem
            :title="item.name"
            v-for="item in categroyList"
            :key="item.id"
          />
        </Sidebar>
      </Sticky>

      <!-- 二级分类 -->

      <div class="category2">
        <div
          class="item"
          :title="item.name"
          v-for="(item, index) in categroyList"
          :key="item.id"
          :id="`item${index}`"
        >
          <div class="category2Name">
            <span>{{ item.name }}</span>
            <span>&gt;</span>
          </div>
          <Divider />
          <div class="category2Item">
            <span
              v-for="category2 in item.channels"
              :key="category2.channeId"
              >{{ category2.channelName }}</span
            >
          </div>
        </div>
      </div>
    </div>

    <!-- 底部搜索框 -->
    <ActionSheet v-model:show="isShowSearch">
      <Search @cancel="cancel" />
    </ActionSheet>
  </div>
</template>

<script lang="ts">
  import HomeSearch from "@/components/HomeSearch/index.vue";
  import { defineComponent } from "vue";
  import type {
    groupsModel,
    metaDataListModel,
  } from "@/api/model/categoryModel";
  export default defineComponent({
    name: "Category",
  });
</script>

<script lang="ts" setup>
  import { ActionSheet } from "vant";
  import Search from "@/components/Search/index.vue";
  import { onMounted, ref } from "vue";
  // import { Tab, Tabs, IndexBar, IndexAnchor } from "vant";
  import { Sidebar, SidebarItem, Divider, Sticky } from "vant";
  import { getCategoryListApi } from "@/api/category";

  const active = ref(0);
  const onChange = (index: number) => {
    // 获取锚点位置
    let target = document.getElementById(`item${index}`);
    // 跳转到该位置
    target &&
      target.scrollIntoView({
        // 不想要滚动动画,则设置为"instant"
        behavior: "smooth", // 滚动动画
        block: "start",
      });
    // // scrollTop:
    // document.body.scrollTop = 50;
    // document.documentElement.scrollTop = 50;
  };

  // 得到滚动事件

  // 控制搜索组件显示的标识
  const isShowSearch = ref(false);

  // 自定义事件——搜索页将取消按钮的状态传递过来
  const cancel = () => {
    isShowSearch.value = false;
  };

  // 显示搜索框
  const showSearch = () => {
    isShowSearch.value = true;
  };

  const categroyList = ref<groupsModel>([]);

  const indexList = ref<String[]>([]);

  /* 分类列表 start */
  const getCategoryList = async () => {
    const result = await getCategoryListApi();
    console.log(result, "一级分类");
    // 一级渲染列表赋值
    categroyList.value = result.groups;

    categroyList.value.forEach((item: any) => {
      indexList.value.push(item.name);
    });
    // console.log(indexList.value);
  };
  /* 分类列表 end */
  onMounted(() => {
    getCategoryList();
  });
</script>

<style lang="scss" scoped>
  .category {
    .header {
      margin-bottom: 10px;
      height: 50px !important;
    }
    .display-flex {
      display: flex;
      justify-content: space-between;

      .van-sidebar {
        height: calc(100vh - 70px);
        .van-sidebar-item {
          width: 90px;
          padding: 10px 12px;
        }
      }
      .category2 {
        width: 270px;
        height: calc(100vh - 70px);
        .item {
          margin-bottom: 30px;
          padding-top: 60px; // 上方遮挡的高度，根据实际情况自己调整
          margin-top: -60px;
          // scroll-padding-top: 50px;
          .category2Name {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            font-weight: bold;
            padding-right: 25px;
            padding-top: 5px;
            span {
              display: block;
            }
          }

          .category2Item {
            display: flex;
            flex-wrap: wrap;
            span {
              display: block;
              height: 20px;
              font-size: 14px;
              color: #8a9594;
              line-height: 20px;
              text-align: center;
              padding: 7.5px;
            }
          }
        }
      }
    }
  }
</style>
